<template>
  <div class="am-fr dis-flex">
    <!-- 存在分页 -->
    <!-- <el-pagination background size="mini" :current-page="currentPage" :page-size="15" layout="total,prev, pager, next" :total="total" @current-change="handleCurrentChange" /> -->
    <el-pagination
      background
      :current-page="pagination.page"
      :page-sizes="pagination.sizes"
      :page-size="pagination.per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      default: 1
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      pagination: {
        page: 1,
        // total: 400,
        per_page: 30,
        sizes: [15, 30, 45, 60],
        cb: Function
      }
    }
  },
  methods: {
    init(data) {
      this.pagination = { sizes: this.pagination.sizes, ...data }
    },
    handleSizeChange(val) {
      this.pagination.per_page = val
      this.pagination.cb({ page: this.pagination.page, per_page: this.pagination.per_page })
    },
    handleCurrentChange(val) {
      console.log(111)
      this.pagination.page = val
      this.pagination.cb({ page: this.pagination.page, per_page: this.pagination.per_page })
    }
  }
}
</script>
<style lang="scss" scoped>
.am-fr{
  justify-content: flex-end;
  padding-top: 10px;
  padding-bottom: 10px;
}
p{
  margin: 0;
}
</style>
